<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Table Data</title>
</head>
<style type="text/css">
	a.sort{
		text-decoration: none;
		display: block;
		margin: 5px;
		padding: 10px 20px;
		width: 80px;height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 10px;
		color: #7e7e7e;
		background: #bababa;
		float: left;
	}
	a.sort:hover{
		color: black;
		background-color: #cecece;
	}
</style>
<body>
<?php 
$tableData = [
['id' => 1, 'name' => 'Kevin', 'age' => 45, 'title' => 'changer','salary' => 5000],
['id' => 2, 'name' => 'John', 'age' => 46, 'title' => 'asshole','salary' => 4100],
['id' => 3, 'name' => 'Allen', 'age' => 44, 'title' => 'hope','salary' => 5600],
['id' => 4, 'name' => 'Ray', 'age' => 25, 'title' => 'chalenger','salary' => 3000]
];

$data = $tableData;
if ($_SERVER['REQUEST_METHOD'] === 'POST'){
	$searchKey = isset($_POST['search_key']) ? trim(htmlspecialchars($_POST['search_key'])) : '';
	$searchData = [];
	foreach ($tableData as $element) {
		if (stripos($element['age'], $searchKey) === 0) {
			$searchData[] = $element;
		}
		if ($searchKey == '') {
			$searchData[] = $element;
		}
	}
	$data = $searchData;

	$sortKey = isset($_POST['sort_key']) ? $_POST['sort_key'] : 0;
	switch ($sortKey) {
		case 0:
			usort($data, 'compareById');
			break;
		case 1:
                        usort($data, 'compareByName');
                        break;
		case 2:
			usort($data, 'compareByAge');
			break;
		case 3:
			usort($data, 'compareBySalary');
			break;
	}
}

/**
 *按id比较数组元素
 *
 *@param $element1
 *@param $element2
 *@return 返回值大于0表示$element>
 *$element2;小于0表示$element1<$element2;
 *等于0表示$element1=$element2。
 */
function compareById($element1, $element2)
{
	return ($element1['id'] - $element2['id']);
}


/**
 *按姓名比较数组元素
 *
 *@param $element1
 *@param $element2
 *@return 返回值大于0表示$element>
 *$element2;小于0表示$element1<$element2;
 *等于0表示$element1=$element2。
 */
function compareByName($element1, $element2)
{
	return strcmp($element1['name'], $element2['name']);
}

/**
 *按年龄比较数组元素
 *
 *@param $element1
 *@param $element2
 *@return 返回值大于0表示$element>
 *$element2;小于0表示$element1<$element2;
 *等于0表示$element1=$element2。
 */
function compareByAge($element1, $element2)
{
        return ($element1['age'] - $element2['age']);
}


/**
 *按工资比较数组元素
 *
 *@param $element1
 *@param $element2
 *@return 返回值大于0表示$element>
 *$element2;小于0表示$element1<$element2;
 *等于0表示$element1=$element2。
 */
function compareBySalary($element1, $element2)
{
	return ($element1['salary'] - $element2['salary']);
}
?>
<div id="wrapper">
	<div>
		<form method="post">
			<input type="text" name="search_key" placeholder="please input an age">
			<input type="submit" value="search">
		</form>
	</div>
	<div>
		<form method="post">
			<select name="sort_key">
				<option value="0">id</option>
				<option value="1">name</option>
				<option value="2">age</option>
				<option value="3">salary</option>
			</select>
			<input type="submit" value="sure">
		</form>
	</div>
	<table>
		<tr>
			<th>id</th>
			<th>name</th>
			<th>age</th>
			<th>title</th>
			<th>salary</th>
			<th>action</th>
		</tr>
		<?php foreach ($data as $element): ?>
			<tr>
				<td><?=$element['id'] ?></td>
				<td><?=$element['name'] ?></td>
				<td><?=$element['age'] ?></td>
				<td><?=$element['title'] ?></td>
				<td><?=$element['salary'] ?></td>
				<td><a href="detail.php?id=<?php echo $element['id'] ?>&name=<?php echo $element['name'] ?>&age=<?php echo $element['age'] ?>&title=<?php echo $element['title'] ?>&salary=<?php echo $element['salary'] ?>" target="_blank">detail</a></td>
			</tr>
		<?php endforeach; ?>
	</table>
</body>
</html>
